<template>
  <div class="hotGoods">
    <h3>热卖商品</h3>
    <ul>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <li v-for="item of list" :key="item.goodsId">
          <router-link :to="{name:'goodsDetail',params:{id:item.goodsId}}">
            <img  v-lazy="item.image" loading="../images/loading.gif" />
          </router-link>
          <p>{{item.name}}</p>
          <p>{{item.mallPrice | getRmbformate}}</p>
        </li>
      </van-list>
    </ul>
  </div>
</template>

<script>
// import orderFilter from "../../../filter/rmb.js";

export default {
  props: ["hotgoods"],
  // 过滤器注册
  filters: {
    getRmbformate(value) {
      return "￥" + value;
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },
  methods: {
    onLoad() {
      var that = this;
      setTimeout(() => {
        let lishi = that.hotgoods.splice(0, 4);
        for (let i = 0; i < 4; i++) {
          that.list.push(lishi[i]);
        }

        // 加载状态结束
        that.loading = false;

        // 数据全部加载完成
        if (that.hotgoods.length == 0) {
          that.finished = true;
        }
      }, 1000);
    }
  }
};
</script>
<style scoped>
.hotGoods h3 {
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: black;
}
.hotGoods img {
  width: 187.5px;
}
.hotGoods ul {
  overflow: hidden;
  background-color: #fff;
}
.hotGoods li {
  float: left;
  padding-bottom: 15px;
  text-align: center;
}
.hotGoods p:nth-of-type(1) {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 10px;
  padding: 4px 0 10px;
}
</style>